<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>搜索-添加Token</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui-hangqing.css"/>
    <style type="text/css">
        header {
            color: #FFFFFF;
            background: -webkit-linear-gradient(left top, #0F9BEB, #1569C8);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom right, #0F9BEB, #1569C8);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom right, #0F9BEB, #1569C8);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom right, #0F9BEB, #1569C8);
            /* 标准的语法*/
        }

        .aui-bar {
            min-height: 32px;
            line-height: 32px;
        }

        .aui-bar .aui-title {
            margin: 30px auto;
        }

        .aui-searchbar {
            margin: 0 !important;
            background: initial;
            padding-left: 0 !important;
            padding-right: 0 !important;
            overflow: initial;
        }

        .aui-searchbar-input {
            margin: 0 1.25rem 0 0.75rem !important;
            padding-left: 0.4rem !important;
        }

        .aui-searchbar .aui-searchbar-btn {
            border: 0.05rem solid #ffffff;
            text-align: center;
            border-radius: 0.15rem;
            /*margin-right: 0.75rem;*/
            padding: 0;
        }

        .aui-searchbar-btn {
        }

        /*.aui-text-info {
            color: #FFFFFF !important;
        }*/

        .aui-bar-nav {
            top: 0;
            padding-bottom: 6px;
            box-shadow: 0px 5px 5px #0c5ebb;
        }

        .aui-searchbar .aui-searchbar-btn {
            border: 0.05rem solid #ffffff;
            color: #FFFFFF;
            width: 2.75rem;
        }

        .aui-searchbar-clear-btn {

        }
        .aui-searchbar-clear-btn {
            /*right: -6px !important;*/
            background-color: initial;
            position: absolute;
            right: 0.25rem !important;
            top: 0.35rem !important;
            width: 0.8rem !important;
            height: 0.8rem !important;
            /*background: #eeeeee;*/
            border-radius: 50%;
            /*line-height: 1.4rem;*/
            text-align: center;
            display: none;
        }

        /*强制icon样式*/

        .back-icon {
            width: 20px;
            height: 32px;
            background-image: url(../../image/btn/nav_back@2x.png);
            background-size: 20px;
            margin: 30px 0 2px 0px;
            background-position: center;
            background-repeat: no-repeat;
        }

        .search-icon {
            display: -webkit-box;
            width: 0.8rem;
            height: 0.8rem;
            background-image: url(../../image/btn/search_input_ss@2x.png);
            background-size: 0.8rem;
            margin: 6px 0 2px 0px;
            background-position: center;
            background-repeat: no-repeat;
        }

        .clear-icon {
            display: -webkit-box;
            width: 0.8rem;
            height: 0.8rem;
            background-image: url(../../image/btn/search_input_sc@2x.png);
            background-size: 0.8rem;
            background-color: #eeeeee;
            border-radius: 50%;
            /* margin: 1px 0px 0px 1px; */
            background-position: center;
            background-repeat: no-repeat;
        }

        /*清除icon原有格式*/

        .aui-icon-search:before {
            content: initial;
        }

        .aui-icon-roundclosefill:before {
            content: initial;
        }

        /*列表强制样式*/

        .aui-content.search-list {
            background-color: #FFFFFF;
        }

        .aui-info.aui-margin-t-10.aui-padded-l-10.aui-padded-r-10 {
            border-bottom: 1px solid #e6e6e6;
        }

        .aui-info-item.mc-item {
            color: #000000;
            font-size: 0.7rem;
            width: 35%;
        }

        .aui-info-item.jys-item {
            width: 40%;
            font-size: 0.6rem;
        }

        .aui-info-item.sc-item {
            width: 10%;
            z-index: 1001
        }

        .aui-searchbar-input input {
            font-size: 0.6rem;
            width: 95%;
        }

        .aui-info-item.sc-item img {
            width: 1rem;
        }

        /*搜索失败提示*/
        /*注意:相对于不定高度的body绝对定位,不可给父集相对定位设置*/

        .aui-content.infor-big-content {
            /*position: relative;*/
        }

        .infor-content {
            width: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .infor-img-content {
            width: 100%;
            text-align: center;
        }

        .infor-img {
            display: inline-flex;
            height: 70px;
        }

        .infor-txt-content {
            width: 100%;
            display: inline-block;
            font-size: 0.6rem;
            color: #000000;
            padding: 0 !important;
        }

        header.aui-bar.aui-bar-nav.aui-bar-info {
            box-shadow: 0px 1px 3px #0c5ebb;
        }

        .aui-content-padded {
            padding: 0.75rem;
            background-color: #ffffff;
            margin-top: 0.75rem;
        }

        .aui-padded-r-10 {
            padding-right: 0.75rem !important;
        }

        .aui-padded-l-10 {
            padding-left: 0.75rem !important;
        }

        .aui-content.search-list {
            background-color: initial !important;
        }

        ul#searchChose {
            text-align: center;
            margin: 0 auto;
            margin-top: 21px;
            background-color: #F7F7F7 !important;
        }

        ul#searchChose li {
            display: inline-block;
            border-radius: 20px;
            font-size: 0.7rem;
            min-width: 3.5rem !important;
            color: #999999;
            background-color: #FFFFFF;
            margin: 9px 4px;
            padding: 9px 13px;
            box-shadow: 0px 0.75px 3px #999;
        }

        #searchLis {
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: top;
            background-image: none !important;

        }

        #searchLis li {
            background-color: #ffffff;
            border-bottom: 1px solid #e6e6e6 !important;
            z-index: 10000;
            /*margin: 1px auto;*/
        }

        #searchLis li.aui-list-item.li-mairu {
            padding-left: 0.75rem !important;
            margin-left: 0 !important;
            background-color: #FFFFFF;
        }

        #searchLis li.aui-list-item.li-mairu {
            background-color: #FFFFFF;
            height: 2.25rem !important;
            line-height: 2.25rem !important;
        }

        #searchLis li label {
            overflow: hidden;
        }

        input.aui-pull-right.aui-checkbox.aui-checkbox-info {
            margin-right: 0.35rem !important;
            overflow: hidden;
        }

        .aui-radio, .aui-checkbox {
            background-color: #ffffff;
            border: solid 1px #999999;
        }

        .aui-radio, .aui-checkbox {
            width: 0.65rem;
            height: 0.65rem;
        }

        span {
            display: inline-block;
            float: left;
        }

        /*禁止引用至编辑页面*/
        span.btImg {
            width: 1.1rem;
            height: 2.25rem;
            line-height: 2.25rem !important;
            background: url(../../image/btn/setting_hlgl@2x.png) no-repeat;
            background-size: 1.1rem;
            background-position: center;
            margin: 0px auto;
        }

        span.btName {
            margin-left: 0.5rem;
            font-size: 0.7rem !important;
            color: #000000 !important;
        }

    </style>
</head>

<body>
<header class="aui-bar aui-bar-nav aui-bar-info">
    <a class="aui-pull-left" onclick="backAddPage()">
        <span class="back-icon"></span>
    </a>
    <div class="aui-title">添加Token</div>
    <!--搜索框-->
    <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius">
            <span class="aui-iconfont aui-icon-search search-icon"></span>
            <input type="search" placeholder="请输入搜索内容" id="search-input" autofocus="autofocus">
            <div class="aui-searchbar-clear-btn">
                <span class="clear-icon"></span>
            </div>
        </div>
        <div class="aui-searchbar-btn" style="margin-right: 15px;" tapmode>取消</div>
    </div>

</header>
<!--搜索行情列表-->
<section class="aui-content search-list">

    <ul id="searchChose">
        <li>BitCoin(BTC)</li>
        <li>BitCoin(ETH)</li>
        <li>BitCoin(USD)</li>
        <li>BitCoin(CNY)</li>
        <li>BitCoin(ETHC)</li>
        <li>BitCoin(BT)</li>
    </ul>
    <ul id="searchLis">
        <!--<li class="aui-list-item li-mairu">-->
        <!--<div class="aui-list-item-inner">-->
        <!--<label class="aui-input-addon"><span class="btImg"></span ><span class="btName">比特币2</span></label>-->
        <!--</div>-->
        <!--</li>-->
        <!--<li class="aui-list-item li-mairu">-->
        <!--<div class="aui-list-item-inner">-->
        <!--<label class="aui-input-addon"><span class="btImg"></span ><span class="btName">比特币2</span></label>-->
        <!--</div>-->
        <!--</li>-->
    </ul>


</section>

<!--搜索失败显示-->
<section class="infor-big-content">
    <!-- <div class="infor-content">
        <div class="infor-img-content">
            <img src="../../icon/icon150x150.png" class="infor-img"/>
        </div>
        <p class="aui-padded-10 aui-text-center infor-txt-content">对不起，没有搜索到相关内容！</p>
    </div> -->
</section>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../script/tool.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

  var headers = {
    "appVersion": "1.0.0",
    "os": "ios",
    "osVersion": "10.0.0"
  }
  //	点击搜索第二功能
  apiready = function () {
    api.parseTapmode();
    headers = {
      "appVersion": "1.0.0",
      "os": api.systemType,
      "osVersion": api.systemVersion
    }
  }
  var searchBar = document.querySelector(".aui-searchbar");
  var searchBarInput = document.querySelector(".aui-searchbar input");
  var searchBarBtn = document.querySelector(".aui-searchbar .aui-searchbar-btn");
  var searchBarClearBtn = document.querySelector(".aui-searchbar .aui-searchbar-clear-btn");
  if (searchBar) {
    searchBarInput.onclick = function () {
      searchBarBtn.style.marginRight = "0.75rem";
    }
    searchBarInput.oninput = function () {
      if (this.value.length) {
        searchBarClearBtn.style.display = 'block';
        //              cation: aui-text-info属性对该处功能有影响
        //              searchBarBtn.classList.add("aui-text-info");
        searchBarBtn.textContent = "搜索";
        $("#searchChose").css("display", "none")
      } else {
        searchBarClearBtn.style.display = 'none';
        //              searchBarBtn.classList.remove("aui-text-info");
        searchBarBtn.textContent = "取消";
      }
    }
  }
  searchBarClearBtn.onclick = function () {
    this.style.display = 'none';
    searchBarInput.value = '';
    searchBarBtn.classList.remove("aui-text-info");
    searchBarBtn.textContent = "取消";
    $('#searchLis').empty();
    $("#searchChose").css("display", "block")
  }

  searchBarBtn.onclick = function () {
    $('#searchLis').empty();
    var keywords = searchBarInput.value;
    if (keywords.length) {
      searchBarInput.blur();
      ajax_fordata(keywords);
    } else {
      this.style.marginRight = "-" + this.offsetWidth + "px";
      searchBarInput.value = "";
      searchBarInput.blur();
    }
  };
  var resultlist = [];

  function ajax_fordata(k) {
    //http://api.kktoken.io:7001/coin/searchCoin
    //			var k='';
    $.ajax({
      url: orginlink + '/allcoin/searchCoin?coin=' + k,
      type: 'GET',
      headers: headers,
      contentType: "application/json",
      dataType: 'json',
      success: function (result) {
        console.log(JSON.stringify(result))
        resultlist = result.result;
        addSearch(result, k);
        localStorage.setItem('exchangeId', JSON.stringify(result));
        localStorage.setItem("dataList", JSON.stringify(result.result))
      }
    });
  }

  //行情搜索
  var mindex = 0;

  function addSearch(result, k) {

    $.each(result.result, function (index, obj) {
      var jysName = obj['exchangeId'];
      var nickName = obj['coin'];
      var symbol = obj['symbol'];
      var x = getjysName(jysName);

      var is = 1;
      var likeList = JSON.parse(localStorage.getItem("likeLists"))
      if (!likeList)
        likeList = []

      for (let i of likeList) {
        if (i.nickName == resultlist[index].nickName && i.exchangeId == resultlist[index].exchangeId) {
          is = 0
        }
      }
      $('#searchLis').append('<li class="aui-list-item li-mairu" style="border-bottom: 0.05rem #e6e6e6 solid !important;">' +
        '<div class="aui-list-item-inner">' +
        '<label class="aui-input-addon"><span class="btImg"></span ><span class="btName">' + nickName + '(' + symbol + ')' + '</span></label>' +
        '</div>' + '</li>');
    });
    clickLis();
  }

  // 常用列表的点击
  $("#searchChose li").click(function () {
    var $li = $(this);
    console.log($li.data('select'))
    if ($li.data('select') == true) {
      $li.css('backgroundColor', '#ffffff').data('select', false);
      settokenName($("#searchChose li").text())
    } else {
      $li.css('backgroundColor', '#e5e5e5').data('select', true);
      settokenName($(this).text())
      backAddPage()
    }

  })

  // 输入搜索信息展示列表后的点击
  function clickLis() {
    $("#searchLis li").click(function () {
      settokenName($(this).text());
      backAddPage()
    })
  }

  function backAddPage() {
    window.history.go(-1);
  }

  function settokenName(text) {
    var tokenName = ""
    var AbbreviationName = ""

    var arr = text.split('(')
    tokenName = arr[0];
    AbbreviationName = arr[1].split(')')[0];

    sessionStorage.setItem('tokenName', tokenName);
    sessionStorage.setItem('AbbreviationName', AbbreviationName);
  }
</script>
</html>
